<template>
 <el-dialog v-model="addOrEditVisible" title="日志管理" :before-close="closeEditDialog" width="50%">
   <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm"
          :size="formSize" status-icon>
       <el-row>
         <el-col :span="24">
           <el-form-item label="主键" prop="id">
             <el-input v-model="ruleForm.id"/>
           </el-form-item>
         </el-col>
        </el-row>
       <el-row>
         <el-col :span="24">
           <el-form-item label="执行用户id" prop="userId">
             <el-input v-model="ruleForm.userId"/>
           </el-form-item>
         </el-col>
        </el-row>
       <el-row>
         <el-col :span="24">
           <el-form-item label="" prop="userName">
             <el-input v-model="ruleForm.userName"/>
           </el-form-item>
         </el-col>
        </el-row>
       <el-row>
         <el-col :span="24">
           <el-form-item label="ip" prop="ip">
             <el-input v-model="ruleForm.ip"/>
           </el-form-item>
         </el-col>
        </el-row>
       <el-row>
         <el-col :span="24">
           <el-form-item label="url" prop="url">
             <el-input v-model="ruleForm.url"/>
           </el-form-item>
         </el-col>
        </el-row>
       <el-row>
         <el-col :span="24">
           <el-form-item label="请求方式" prop="method">
             <el-input v-model="ruleForm.method"/>
           </el-form-item>
         </el-col>
        </el-row>
       <el-row>
         <el-col :span="24">
           <el-form-item label="" prop="createTime">
             <el-input v-model="ruleForm.createTime"/>
           </el-form-item>
         </el-col>
        </el-row>
       <el-row>
         <el-col :span="24">
           <el-form-item label="日志备注" prop="remark">
             <el-input v-model="ruleForm.remark"/>
           </el-form-item>
         </el-col>
        </el-row>
       <el-row>
         <el-col :span="24">
           <el-form-item label="" prop="className">
             <el-input v-model="ruleForm.className"/>
           </el-form-item>
         </el-col>
        </el-row>
       <el-row>
         <el-col :span="24">
           <el-form-item label="" prop="httpMethod">
             <el-input v-model="ruleForm.httpMethod"/>
           </el-form-item>
         </el-col>
        </el-row>
       <el-row>
         <el-col :span="24">
           <el-form-item label="" prop="methodName">
             <el-input v-model="ruleForm.methodName"/>
           </el-form-item>
         </el-col>
        </el-row>
       <el-row>
         <el-col :span="24">
           <el-form-item label="" prop="args">
             <el-input v-model="ruleForm.args"/>
           </el-form-item>
         </el-col>
        </el-row>
   </el-form>
   <template #footer>
     <span class="dialog-footer">
       <el-button @click="closeEditDialog">关闭</el-button>
       <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
     </span>
   </template>
 </el-dialog>
</template>

<script lang="ts" setup>
    import {reactive, ref} from 'vue'
    import type {FormInstance, FormRules} from 'element-plus'
    import {ElMessage} from "element-plus";
    import router from "@/router";
    import {Log} from '@/apis/model/system/LogModel';
    import {insertLog, updateLog} from '@/apis/http/system/LogHttp';

    interface Prop {
        addOrEditVisible: boolean,
        ruleForm: Log,
        addDataType: string
    }

    // 刷新list页面
    const refushList = ref(false);

    // 传递过来的参数
    const props = defineProps<Prop>();

    const emit = defineEmits(["closeEditDialog"]);

    // 关闭按钮
    const closeEditDialog = () => {
        emit("closeEditDialog", {
            addOrEditVisible: !props.addOrEditVisible,
            refushList: refushList.value
        })
    }
    const formSize = ref('default')
    const ruleFormRef = ref<FormInstance>()

    const rules = reactive<FormRules>({
        id: [
            {required: true, message: '请输入主键', trigger: 'blur'}
        ],
        userId: [
            {required: true, message: '请输入执行用户id', trigger: 'blur'}
        ],
        userName: [
            {required: true, message: '请输入', trigger: 'blur'}
        ],
        ip: [
            {required: true, message: '请输入ip', trigger: 'blur'}
        ],
        url: [
            {required: true, message: '请输入url', trigger: 'blur'}
        ],
        method: [
            {required: true, message: '请输入请求方式', trigger: 'blur'}
        ],
        createTime: [
            {required: true, message: '请输入', trigger: 'blur'}
        ],
        remark: [
            {required: true, message: '请输入日志备注', trigger: 'blur'}
        ],
        className: [
            {required: true, message: '请输入', trigger: 'blur'}
        ],
        httpMethod: [
            {required: true, message: '请输入', trigger: 'blur'}
        ],
        methodName: [
            {required: true, message: '请输入', trigger: 'blur'}
        ],
        args: [
            {required: true, message: '请输入', trigger: 'blur'}
        ],
    })

    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl)  return 
        await formEl.validate((valid, fields) => {
            if (valid) {
                // 新增
                if (props.addDataType === 'add') {
                    insertLog(props.ruleForm).then(res => {
                        const code = res.code;
                        const message : string = res.message;
                        const data = res.data;
                        if (code == 200) {
                            ElMessage({
                                message: '创建成功！',
                                type: 'success',
                            })
                            refushList.value = true
                            closeEditDialog()
                        } else {
                            ElMessage.error('创建失败！')
                        }
                    })
                } else if (props.addDataType === 'edit') {
                    updateLog(props.ruleForm).then(res => {
                        const code = res.code;
                        const message: string = res.message;
                        const data = res.data;
                        if (code == 200) {
                            ElMessage({
                                message: '更新成功！',
                                type: 'success',
                            })
                            refushList.value = true
                            closeEditDialog()
                        } else {
                            ElMessage.error('更新失败！')
                        }
                    })
                }

            } else {
                ElMessage.error('请完善信息！')
            }
        })
    }
</script>

<style scoped>
    .dialog-footer button:first-child {
        margin-right: 10px;
    }
</style>
